<template>
  <div class="app-main-content">
    <div class="top-btns-area">
      <el-button
        v-oauth
        type="primary"
        data-oauthUuid="1620439315935"
        @click="handleAdd">
        创建
      </el-button>
      <el-button
        v-oauth
        type="danger"
        data-oauthUuid="1620439321912"
        :loading="delBtnLoading"
        :disabled="!selected.length"
        icon="el-icon-delete"
        @click="handleDeleteAll">
        删除
      </el-button>
      <div class="search-btn">
        <el-button
          @click="onReset">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="queryShow">
          搜索
        </el-button>
      </div>
    </div>
    <scmsa-table
      v-loading="tableLoading"
      :data="tableData"
      :column="tableColumn"
      border
      :pagination="true"
      height="100%"
      align="center"
      :current-page="pageing.pageNum"
      :page-size="pageing.pageSize"
      :total="totalPage"
      @size-change="handlePageSizeChange"
      @pagination-current-change="handlePageCurrentChange"
      @selection-change="handleSelectionChange" />
    <create
      ref="add"
      @appendData="appendData" />
    <query
      ref="query"
      :options="searchOptions"
      class="query-form"
      @query="onSearch">
    </query>
  </div>
</template>
<script>
  import { tubeBlankPlan } from '@/api/productionPlan'
  import create from './model'
  import query from '../query'
  export default {
    name: 'TubeBlankPlan',
    components: {
      create,
      query
    },
    data() {
      return {
        delBtnLoading: false, // 删除按钮loading
        selected: [], // 复选框选中数据
        typeOptions: [{
          name: '冷轧',
          value: '1'
        }, {
          name: '热轧',
          value: '2'
        }],
        degreeOption: [{
          name: '普通',
          value: '1'
        }, {
          name: '紧急',
          value: '2'
        }],
        deliveryStatus: [
          {
            name: '已交货',
            value: '1'
          },
          {
            name: '未交货',
            value: '2'
          }],
        totalPage: 0,
        action: 'add',
        loading: false,
        tableLoading: false,
        queryForm: null,
        pageing: {
          pageNum: 1,
          pageSize: 10
        },
        tableData: []
      }
    },
    computed: {
      tableColumn() {
        return [
          {
            type: 'selection',
            width: 55,
            align: 'center'
          },
          {
            prop: 'planNumber',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '计划编号',
            render: (h, params) => {
              return h('span', {
                style: {
                  color: '#1890ff',
                  cursor: 'pointer'
                },
                on: {
                  click: (e) => {
                    e.stopPropagation()
                    this.openDetail(params.row)
                  }
                }
              }, params.row.planNumber)
            }

          },
          {
            prop: 'releaseDate',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '下达日期'
          },
          {
            prop: 'completionDate',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '完成日期'
          },
          {
            prop: 'contractNo',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '成品合同号'
          },
          {
            prop: 'blankContractNo',
            label: '坯料合同号',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            prop: 'hotOrColdRolled',
            label: '工艺类型',
            minWidth: '120',
            showOverflowTooltip: true,
            formatter: (row) => {
              return this.renderText(this.typeOptions, row.hotOrColdRolled)
            }
          },
          {
            prop: 'processStandard',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '工艺标准'
          },
          {
            prop: 'tubeBilletName',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '管坯名称'
          },
          {
            prop: 'executiveStandard',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '执行标准'
          },
          {
            prop: 'remarks',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '备注'
          },
          {
            prop: 'urgency',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '紧急度'
          },
          {
            prop: 'outerDiameter1',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '外径1'
          },
          {
            prop: 'outerDiameter2',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '外径2'
          },
          {
            prop: 'wallThickness',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '壁厚'
          },
          {
            prop: 'lengthRange',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '长度范围'
          },
          {
            prop: 'roundBilletRemarks',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '备注'
          },
          {
            prop: 'steelNumber',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '钢号'
          },
          {
            prop: 'finishedProductSpecifications',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '成品规格'
          },
          {
            prop: 'finishedProductStandard',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '成品标准'
          },
          {
            prop: 'specialRequirements',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '特殊要求',
            formatter: (row) => {
              return this.renderText(this.degreeOption, row.feedingType)
            }
          },
          {
            prop: 'roundBilletName',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '圆坯名称'
          },
          {
            prop: 'steelNumberBlank',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '钢号'
          },
          {
            prop: 'expectedFeedingDate',
            label: '预投料日期',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            prop: 'latestFeedDate',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '最晚投料日期'
          },
          {
            prop: 'feedingType',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '投料类型',
            formatter: (row) => {
              return this.renderText(this.feedingType, row.feedingType)
            }
          },
          {
            prop: 'executiveStandardBlank',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '执行标准'
          },
          {
            prop: 'steelNumberBlank',
            minWidth: '120',
            showOverflowTooltip: true,
            label: '钢号'
          },
          {
            prop: 'feedQuantity',
            label: '投料数量'
          },
          {
            prop: 'limitedInvestmentQuantity',
            label: '限投数量'
          },
          {
            prop: 'roundBilletOuterDiameter1',
            label: '外径1'
          },
          {
            prop: 'roundBilletOuterDiameter2',
            label: '外径2'
          },
          {
            prop: 'roundBilletWallThickness',
            label: '壁厚'
          },
          {
            prop: 'length',
            label: '长度'
          },
          {
            prop: 'roundBilletRemarks',
            label: '备注'
          },
          {
            label: '操作',
            fixed: 'right',
            width: 120,
            render: (h, params) => {
              return h('div', [
                h('el-button', {
                  props: {
                    type: 'text',
                    size: 'small',
                    loading: false
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params)
                    }
                  }
                }, '修改'),
                h('el-button', {
                  props: {
                    type: 'text',
                    size: 'small',
                    loading: false
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ]
      },
      searchOptions() {
        return [
          {
            value: 'chineseUsnmAbbr',
            key: 'chineseUsnmAbbr',
            label: '计划编号',
            type: 'input',
            placeholder: '请输入'
          },
          {
            value: 'countryNameAbbr',
            key: 'countryNameAbbr',
            label: '合同号',
            type: 'input',
            placeholder: '请输入'
          },
          {
            value: 'hotOrColdRolled',
            key: 'hotOrColdRolled',
            label: '工艺类型',
            type: 'select',
            options: this.typeOptions,
            customKey: {
              value: 'value',
              label: 'name'
            },
            placeholder: '请选择'
          },
          {
            value: 'userNum',
            key: 'userNum',
            label: '坯料名称',
            type: 'input',
            placeholder: '请输入'
          }
        ]
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 查询搜索
      onSearch(queryParms) {
        this.pageing = {
          pageSize: 10,
          pageNum: 1
        }
        this.queryForm = queryParms
        this.getList()
      },
      queryShow() {
        this.$refs.query.show()
      },
      onReset() {
        this.$refs.query.onReset(false)
      },
      renderText(type, code) {
        if (!(type && code)) {
          return
        }
        for (const item in type) {
          if (type[item].value == code) {
            return type[item].name
          }
        }
      },
      async getList() {
        this.tableLoading = true
        const data = await tubeBlankPlan.getList({
          size: this.pageing.pageSize,
          page: this.pageing.pageNum,
          ...this.queryForm
        })
        this.tableLoading = false
        this.tableData = data.data
        this.totalPage = data.total
      },
      // 每页条数发生改变时返回值
      handlePageSizeChange(v) {
        this.pageing.pageSize = v
        this.getList()
      },
      // 当前选中页发生改变时返回值
      handlePageCurrentChange(v) {
        this.pageing.pageNum = v
        this.getList()
      },
      // checkbox 当选择项发生变化时会触发该事件
      handleSelectionChange(v) {
        this.selected = v
      },
      // 点击添加
      handleAdd() {
        this.$refs.add.show({
          type: 'add',
          data: {},
          title: '创建'
        })
        this.action = 'add'
      },
      // 批量删除
      handleDeleteAll() {
        if (!this.selected.length) {
          this.$message.error('请选择删除项')
          return
        }
        this.$confirm('确定执行删除操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            const ids = this.selected.map((item) => item.id)
            this.batchDel(ids)
          })
          .catch(() => { })
      },
      // 删除
      handleDelete(params) {
        this.$confirm('确定执行删除操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.del(this.tableData[params.$index].id)
          })
          .catch(() => { })
      },
      // 编辑
      handleEdit(params) {
        this.action = 'edit'
        this.getDeatil(params.row.id)
      },
      // 保存
      async save(sendData) {
        const { code } = await tubeBlankPlan.save(sendData)
        if (code == 0) {
          this.$refs.add.closeDialog()
          this.$message({
            message: '创建成功',
            type: 'success'
          })
          this.getList()
        }
      },
      async batchDel(ids) {
        this.delBtnLoading = true
        const { code } = await tubeBlankPlan.batchDel(ids)
        if (code == 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
          this.delBtnLoading = false
        }
      },
      async del(id) {
        const { code } = await tubeBlankPlan.batchDel([id])
        if (code == 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }
      },
      // 添加或修改返回数据
      appendData(data) {
        if (this.action == 'add') {
          this.save(data)
        } else {
          this.update(data)
        }
      },
      async update(sendData) {
        const { code } = await tubeBlankPlan.update(sendData)
        if (code == 0) {
          this.$refs.add.closeDialog()
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getList()
        }
      },
      openDetail(data) {
        this.$refs.add.show({
          type: 'view',
          data: data,
          title: '查看'
        })
        this.action = 'view'
      },
      // 获取详情
      async getDeatil(id) {
        const { data } = await tubeBlankPlan.getDetail(id)
        this.$refs.add.show({
          type: 'edit',
          data: data,
          title: '修改'
        })
        this.action = 'edit'
      }
    }
  }
</script>
<style scoped lang="scss">
  .app-main-content{
    height: 95%;
    overflow: hidden;
  }
  .scmsa-table-page {
    height: calc(100vh - 220px);
  }
  .top-btns-area{
    margin-bottom: 10px;
    overflow: hidden;
    .search-btn{
      float: right;
    }
}
</style>
